<template>
  <!-- 模板部分保持不变 -->
  <div class="content">
    <div class="pageTableView">
      <el-table
          class="pageTableClass"
          :data="qualityData"
          border
          style="width: 100%"
      >
        <el-table-column label="序号" align="center" width="70" fixed>
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center" min-width="200" fixed/>
        <el-table-column prop="value" label="数值" align="center" min-width="200">
          <template #default="scope">
            <el-input-number
                v-if="scope.row.editing"
                v-model="scope.row.value"
                :precision="1"
                :step="0.1"
                :min="0"
                controls-position="right"
            />
            <span v-else>{{ scope.row.value }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="150">
          <template #default="scope">
            <el-button
                v-if="!scope.row.editing"
                @click="handleEdit(scope.row)"
                type="text"
                size="small"
                plain
                :icon="Edit"
            >编辑
            </el-button>
            <el-button
                v-else
                @click="handleSave(scope.row)"
                type="text"
                size="small"
                plain
                :icon="Check"
            >保存
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Edit, Check } from '@element-plus/icons-vue'
import axiosInstance from '@/utils/http/api'

// 质量数据（保持不变）
const qualityData = ref([
  { id: 1, name: '良率', value: 0, editing: false },
  { id: 2, name: '批次合格率', value: 0, editing: false },
  { id: 3, name: 'dppm', value: 0, editing: false },
  { id: 4, name: 'ncr次数', value: 0, editing: false }
])

const loading = ref(false)

// 获取所有质量统计数据（适配新的返回数据结构）
const getAllQualityStatistics = async () => {
  loading.value = true;
  try {
    const response = await axiosInstance.get('/api/navigation/getQualityStatistics');

    // 检查响应结构和状态码
    if (response?.code === 200 && response.data) {
      qualityData.value = qualityData.value.map(item => {
        // 从response.data中获取对应ID的值，并转换为数字
        const rawValue = response.data[item.id.toString()];
        const numericValue = parseFloat(rawValue) || 0;

        return {
          ...item,
          value: numericValue,
          editing: false
        };
      });
    }
  } catch (error) {
    console.error('获取质量统计数据失败:', error);
    ElMessage.error('获取数据失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};
// 设置质量统计数据（关键修改部分）
const setQualityStatistics = async (row: any) => {
  try {
    // 按照ID顺序(1,2,3,4)构建提交数据对象
    const submitData = {}
    qualityData.value.forEach(item => {
      submitData[item.id] = item.id === row.id ? row.value : item.value
    })

    const response = await axiosInstance.post('/api/navigation/setQualityStatistics', submitData)

    if (response.code === 200) {
      ElMessage.success('保存成功')
      // 更新当前行状态
      const index = qualityData.value.findIndex(item => item.id === row.id)
      if (index !== -1) {
        qualityData.value[index].editing = false
      }
    } else {
      ElMessage.error(response.message || '保存失败')
    }
  } catch (error) {
    ElMessage.error('保存质量统计数据失败')
    console.error(error)
  }
}

// 编辑行和保存行方法保持不变
const handleEdit = (row: any) => {
  qualityData.value.forEach(item => {
    item.editing = item.id === row.id
  })
}

const handleSave = (row: any) => {
  setQualityStatistics(row)
}

onMounted(() => {
  getAllQualityStatistics()
  // axiosInstance.post('/api/navigation/setQualityStatistics',{
  //   1: 99,
  //   2: 0.9,
  //   3: 0.7,
  //   4: 100
  // })
})
</script>

<style scoped>
/* 样式保持不变 */
.content {
  padding: 20px;
}
.pageTableClass {
  margin-top: 20px;
}
</style>